import React, { useState, useEffect } from 'react';
import { Button } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { getFilterOptions } from '../api';

export default function Draw() {
    const [show, setShow] = useState(true);
    const [opts, setOpts] = useState({});
    const [pick, setPick] = useState({
        edu: [],
        pay: '',
        exp: [],
        size: ''
    });
    const nav = useNavigate();

    useEffect(() => {
        const load = async () => {
            const res = await getFilterOptions();
            setOpts(res.data);
        };
        load();
    }, []);

    const select = (type, val) => {
        if (type === 'pay' || type === 'size') {
            setPick(prev => ({
                ...prev,
                [type]: prev[type] === val ? '' : val
            }));
        } else {
            setPick(prev => ({
                ...prev,
                [type]: prev[type].includes(val)
                    ? prev[type].filter(v => v !== val)
                    : [...prev[type], val]
            }));
        }
    };

    const clear = () => {
        setPick({
            edu: [],
            pay: '',
            exp: [],
            size: ''
        });
    };

    const ok = () => {
        nav('/', { state: { filters: pick } });
    };

    return (
        <FD visible={show}>
            <FC>
                <FS>
                    <FT>学历要求</FT>
                    <FO>
                        {opts.education?.map(item => (
                            <FOp
                                key={item}
                                selected={pick.edu.includes(item)}
                                onClick={() => select('edu', item)}
                            >
                                {item}
                            </FOp>
                        ))}
                    </FO>
                </FS>

                <FS>
                    <FT>薪资范围</FT>
                    <FO>
                        {opts.salary?.map(item => (
                            <FOp
                                key={item}
                                selected={pick.pay === item}
                                onClick={() => select('pay', item)}
                            >
                                {item}
                            </FOp>
                        ))}
                    </FO>
                </FS>

                <FS>
                    <FT>经验要求</FT>
                    <FO>
                        {opts.experience?.map(item => (
                            <FOp
                                key={item}
                                selected={pick.exp.includes(item)}
                                onClick={() => select('exp', item)}
                            >
                                {item}
                            </FOp>
                        ))}
                    </FO>
                </FS>

                <FS>
                    <FT>公司规模</FT>
                    <FO>
                        {opts.companySize?.map(item => (
                            <FOp
                                key={item}
                                selected={pick.size === item}
                                onClick={() => select('size', item)}
                            >
                                {item}
                            </FOp>
                        ))}
                    </FO>
                </FS>
            </FC>

            <FF>
                <Button block onClick={clear}>清除</Button>
                <Button block type="primary" onClick={ok}>确定</Button>
            </FF>
        </FD>
    );
} 